<template>
  <div>
    <common-title :stitle="alldata.title" :alldata="alldata"/>
    <template>
      <el-table :border="true" :data="alldata.columnData" style="width: 100%" max-height="300">
        <el-table-column v-if="alldata.type && alldata.type === '排序表格'"  type="index" align="center" :resizable="false" label="排名" width="100">
          <template slot-scope="scope" style="position: relative; width: 160px; height: 80px;">
            <span v-if="scope.$index+1 == 1">
              <!-- <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon> -->
              <span class="order order1">
                <!-- <img src="http://localhost:8080/common/images/topicon/top1.png" /> -->
                <img src="/common/images/topicon/top1.png" /> 
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 2">
              <!-- <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon> -->
              <span class="order order2">
                <!-- <img src="http://localhost:8080/common/images/topicon/top2.png" /> -->
                <img src="/common/images/topicon/top2.png" />
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 3">
              <!-- <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon> -->
              <span class="order order3">
                <!-- <img src="http://localhost:8080/common/images/topicon/top3.png" /> -->
                <img src="/common/images/topicon/top3.png" />
              </span>
            </span>
            <span v-else >
              <!-- <svg-icon icon-class="排行榜grey" style="width: 55px; height: 53px"></svg-icon> -->
              <span class="order">{{scope.$index + 1}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-for="col in alldata.columnNames"  :label="col.label" :prop="col.prop" :key="col.label">
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script >
  import commonTitleMixin from '../mixins/commonTitleMixin'
  export default {
    name: 'htable',
    data: function () {
      return {}
    },
    props: ['alldata'],
    mixins: [commonTitleMixin],
    mounted () {
      // //console.log('htable', this.alldata)
    },
    methods: {}
  }

</script>

<style scoped lang="less">
  .order {
    position: relative;
    left: 0px;
    bottom: 0px;
    color: brown;
    size: 60px;
    font-weight: bolder;
    img {
      max-width: 25px;
      max-height: 25px;
      vertical-align: middle;
    }
  }
  

</style>
